/* Starter Stylesheet for our project.
-----------------------------------------------
Please read the comments to understand what
this code does. 

Refer to w3schools.com for help
-----------------------------------------------
*/

/*  This removes the default browser settings */
* {
    margin: 0; 
    padding: 0;
}

/*  
    This sets the outer container for your site.
    To use it, you will need to create division tag
    to hold the content. Give it an id="wrapper".
    I would look like this...
        <div id="wrapper">
    Put this division right after the body tag
    and close it right before the close of the body tag
*/


#wrapper {
    position: relative;
    margin: 0 auto;
    width: somepixels;
    background-color: bisque;
    color: black;
}

/* 
    The is the syntax to set a background image.
    Copy the 2 styles below and put them in the tag
    you want to add a background image to. 
    Then, change the image to your image. 
*/
body {
    background-image: url(../_images/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center; width: 1400px;
}
html, body {
    height: 100%;
    width: 100%;
}

header {
    background-color: white; opacity:0.7;

}
footer {
    background-color:white; opacity:0.7;
}

/*Eden Savoy Header Text*/
#header-text {
color: #000;
text-align: center;
font-family: Judson;
font-size: 96px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: relative;
margin: 0 auto;}

/* Hello!*/
#hello {
    color: #000;
    text-align: center;
    font-family: Judson;
    font-size: 85px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 694px;
    height: 102px;
    flex-shrink: 0;
    position: relative;
    margin: 0 auto;}

/* Welcome to my Website */
#welcometomywebsite {
    width: 547px;
    height: 61px;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-family: Judson;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    margin: 0 auto;}

/* Nav Bar */
#nav {display: flex;
    width: 1080px;
    height: 24px;
    justify-content: center;
    align-items: flex-start;
    gap: 84px;
    flex-shrink: 0;
    position: relative;
    margin: 0 auto;}


        nav a:hover {
            color: red;
        }
#content-wrap {
    max-width: 800px;
    width: 85%;
    margin: 0 auto;
}
/* Index Body Text */
#body-text {position: absolute;
    width: 1024px;
    height: 285px;
    flex-shrink: 0;
    color: #000;
    text-align: center;
    font-family: Judson;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 10px;
    position: relative;
    margin: 0 auto;}
    .text-container {
        text-align: center; /* Centers text horizontally */
    }

/* pic of me */
.container {
    display: flex;             /* Use Flexbox */
    justify-content: center;   /* Center horizontally */
    /* height: 100vh;         Optional: Uncomment if you want a full-height container */
}

.container img {
    width: 690px;             /* Set your desired width */
    height: auto;             /* Maintain aspect ratio */
    flex-shrink: 0;           /* Prevent the image from shrinking */
    margin-top: -120px; /* Adjust this value to move the image up */}
/* Resume Text*/
#resume-text
{width: 428px;
    height: 81px;
    text-align: center;
    font-family: Judson;
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    margin: 0 auto;}
    
/* Resume*/
.image-wrapper {
    display: flex;             /* Use Flexbox */
    justify-content: center;   /* Center horizontally */
    height: 100vh;            /* Optional: specify the height */
}

.image-wrapper img {
    width: 550px;             /* Set your desired width */
    height: 600px;            /* Set your desired height */
    flex-shrink: 0;           /* Prevent the image from shrinking */
    margin-top: -20px;
}

/* Links Page My Campus Activities */
    #mycampusactivities {text-align: center;}

/* Campus activities links */
#campusactivitieslinks {text-align: center; font-size: 24px;}

/* Links Page My Favorite Digital Media Resources */
#digitalmediaresources {text-align: center;}

/* Resource Links */
#resources {text-align: center;font-size: 24px;}

/* Links Page Journalism Podcasts */
#journalismpodcasts {text-align: center;}

/* Podcasts Links */
#podcasts {text-align: center;font-size: 24px;}

    /* Photos text */
    #photos {width: 818px;
        height: 84px;
        flex-shrink: 0;
        color: #000;
        text-align: center;
        font-family: Judson;
        font-size: 44px;
        font-style: normal;
        font-weight: 400;
        line-height: normal; 
        position: relative;
        margin: 0 auto;}
    
        .carousel {
            position: relative;
            width: 600px; /* Set the width of your carousel */
            height: 900px;
            overflow: hidden;
        }
        
        
        .carousel-images {
            position: relative;
        }
        
        .slides {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .slide {
            min-width: 100%;
        }
        
        img {
            width: 100%; /* Make the image responsive */
            height: auto;
        }
        
        input[type="radio"] {
            display: none; /* Hide the radio buttons */
        }
        
        .navigation {
            text-align: center;
            padding: 10px 0;
        }
        
        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            cursor: pointer;
        }
        
        #slide1:checked ~ .slides {
            transform: translateX(0);
        }
        
        #slide2:checked ~ .slides {
            transform: translateX(-100%);
        }
        
        #slide3:checked ~ .slides {
            transform: translateX(-200%);
        }
        
        #slide4:checked ~ .slides {
            transform: translateX(-300%);
        }
        
        #slide5:checked ~ .slides {
            transform: translateX(-400%);
        }
        
        #slide6:checked ~ .slides {
            transform: translateX(-500%);
        }
        
        #slide7:checked ~ .slides {
            transform: translateX(-600%);
        }
        
        #slide8:checked ~ .slides {
            transform: translateX(-700%);
        }
        
        #slide9:checked ~ .slides {
            transform: translateX(-800%);
        }
        
        #slide10:checked ~ .slides {
            transform: translateX(-900%);
        }
        
        #slide11:checked ~ .slides {
            transform: translateX(-1000%);
        }
        
        #slide12:checked ~ .slides {
            transform: translateX(-1100%);
        }
        
        #slide13:checked ~ .slides {
            transform: translateX(-1200%);
        }
        
        .dot:hover {
            background-color: #717171;
        }
        
        body {
            margin: 0; /* Removes default margin */
        }
        
        .carousel {
            position: relative;
            width: 600px; /* Set the width of your carousel */
            overflow: hidden;
            margin: 0 auto; /* Center the carousel horizontally */
        }
        
        .carousel-images {
            position: relative;
        }
        
        .slides {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .slide {
            min-width: 100%;
        }
        
        img {
            width: 100%; /* Make the image responsive */
            height: auto;
        }
        
        input[type="radio"] {
            display: none; /* Hide the radio buttons */
        }
        
        .navigation {
            text-align: center;
            padding: 10px 0;
        }
        
        .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            cursor: pointer;
        }
        
        #slide1:checked ~ .slides {
            transform: translateX(0);
        }
        
        #slide2:checked ~ .slides {
            transform: translateX(-100%);
        }
        
        #slide3:checked ~ .slides {
            transform: translateX(-200%);
        }
        
        /* Continue for all slides up to slide 13 */
        #slide13:checked ~ .slides {
            transform: translateX(-1200%);
        }
        
        .dot:hover {
            background-color: #717171;
        }

        /* Media Header */
        #media-header {
            text-align: center;         
            font-size: 34px;             
            position: relative;
         margin: 0 auto;
        }
        /* Media Text */
        #media-text {text-align: center;         
            font-size: 20px;             
            position: relative;
            margin-top: 20px;}

         #video-container {
            display: flex;             /* Use Flexbox */
            justify-content: center;   /* Center horizontally */
            height: 70vh;            /* Optional: full viewport height */
            margin-top: 30px;
        }
        
        iframe {
            max-width: 100%;          /* Make the iframe responsive */
            height: auto;             /* Maintain aspect ratio */
        }
        

/* sports photo 1 */
.image-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
}

img {
    display: block;
    margin: 0 auto;
    width: 400px; /* Set the width */
    height: 300px; /* Set the height */
}